

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/less">
        @import "http://at.alicdn.com/t/font_1438384_ecwzc70ky.css";
        a, body, div, img, p, span, ul, li {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eceff4;
            overflow: hidden;
            font-size: 14px;
        }

        li {
            list-style: none;
        }

        /*header*/
        .header {
            width: 250px;
            height: 1000px;
            border-right: 1px solid #dddddd;
            background-color: #fff;
            float: left;
            overflow-y: auto;
            position: relative;
            /*active*/
            .active {
                width: 100px;
                height: 50px;
                background-color: #fff;
                position: absolute;
                top: 5px;
                right: 40px;
                font-size: 13px;
                border: 1px solid #cccccc;
                background-color: #eee;
                display: none;
                .active-img {
                    float: left;
                    margin: 7px 5px 0 10px;
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    cursor: pointer;
                }
                p {
                    padding: 5px 0 5px 0;
                }
                ul {
                    margin-left: 25px;
                    li {
                        float: left;
                        width: 20px;
                        height: 20px;
                        &:first-child {
                            margin-right: 10px;
                            background-color: #fff;
                        }
                        &:nth-child(2) {
                            background-color: #545c64;
                        }
                    }
                }
            }
            /*header-top*/
            .header-top {
                font-size: 25px;
                .header-top-font {
                    display: inline-block;
                    margin: 20px 0 25px 80px;
                    font-weight: bold;
                }
                .header-top-img {
                    float: right;
                    margin: 5px 10px 0 0;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                }
            }
            /*header-body*/
            .header-body {
                margin-bottom: 700px;
                .header-body-div {
                    line-height: 35px;
                    text-align: left;
                    cursor: pointer;
                    &:hover {
                        background-color: #eceff4;
                    }
                    /*精灵图定位*/
                    .iconfont {
                        display: inline-block;
                        margin-left: 40px;
                        height: 15px;
                        width: 15px;
                        font-family:"iconfont" !important;
                        font-size: 15px;
                        //毛玻璃效果
                        /*-webkit-filter: blur(1px);
                        filter: blur(1px);*/
                    }
                    /*设置下拉按钮*/
                    .header-body-div-img {
                        width: 15px;
                        height: 15px;
                        float: right;
                        padding-top: 5px;
                        padding-right: 10px;
                    }
                    /*设置ul*/
                    .header-body-div-div-ul {
                        width: 100%;
                        display: none;
                        .header-body-div-first-li {
                            .iconfont{
                                padding-left: 30px;
                            }
                            height: 40px;
                            &:hover {
                                background-color: #eceff4;
                            }
                        }
                    }
                }
            }
        }
    </style>
</head>
<body>
<div class="header"></div>
<iframe src=" http://yangliming3258379404.gitee.io/second" frameborder="0" scrolling="no" height="280"></iframe>
<script src="jquery-1.12.4.js"></script>
<script>
    $(document).ready(function () {
        //header标签
        $.getJSON("table1.json", function (response) {
            //设置logo
            var html = `<div><div class="header-top">
                <div class="header-top-font"><p>控制台</p></div>
                <img src="Img/换肤.png" alt="" class="header-top-img">
                <div class="active">
                    <img src="Img/换肤.png" alt="" class="active-img">
                    <p>个性皮肤</p>
                    <ul>
                        <li class="firstColor"></li>
                        <li class="secondColor"></li>
                    </ul>
                </div></div>
                </div><div class="header-body">`;
            //设置左侧栏
            $.each(response.list, function (index, value) {
                html += `<div class="header-body-div">
                    <span class="${value.menuIcon}"></span>
                    <span>${value.menuName}</span>`;
                if (value.sonMenus) {
                    html += `<img src="Img/toBottom.png" class="header-body-div-img">`;
                    html += '<ul class="header-body-div-div-ul">';
                    $.each(value.sonMenus, function (i, v) {
                        html += `<li class="header-body-div-first-li">
                        <span class="${v.menuIcon}"></span>
                        ${v.menuName}</li>`
                    });
                    html += `</ul>`;
                }
                html += `</div>`;
            });
            html += `</div></div>`;
            $(".header").append(html);
            //子集标题显示隐藏效果
            $(".header-body-div").on("click", function (e) {
                $(this).children("ul").on("click", function (e) {
                    e.stopPropagation();//阻止事件冒泡
                });
                if ($(this).children("ul").is(":hidden")) {
                    $(this).children("ul").stop().slideDown(300, "linear").css("backgroundColor", "#fff");
                    $(this).children("img").remove();
                    $(this).children("ul").before("<img src='Img/toBottom1.png' class='header-body-div-img'>")
                } else {
                    $(this).children("ul").stop().slideUp(300, "linear");
                    $(this).children("img").remove();
                    $(this).children("ul").before("<img src='Img/toBottom.png' class='header-body-div-img'>")
                }
            });
            var menuType = "light";//记录菜单状态
            //改变每一列的颜色
            function changeMenuItemColor() {
                if (menuType == "light") {
                    $(".header .header-body-div").each(function (item, value) {
                        lightColor(item);
                    })
                } else {
                    console.log(1);
                    $(".header .header-body-div").each(function (item) {
                        deepColor(item);
                    })
                }
            }

            //设置浅色方法
            function lightColor(dom) {
                $(dom).css("backgroundColor", "#eceff4")
            }

            //换肤效果
            $(".header-top-img").on("click", function () {
                $(".active").show();
                $(".firstColor").on("click", function () {
                    changeMenuItemColor();
                    $(".header").css({
                        "backgroundColor": "#fff",
                        "color": "#000"
                    });
                    $(".active").hide();
                });
                $(".secondColor").on("click", function () {
                    changeMenuItemColor();
                    $(".header").css({
                        "backgroundColor": "#545c64"
                    });
                    $(".active").hide();
                })
            });


        })
    })
</script>
<script src="less.min.js"></script>
</body>
</html>